// 今日报警总数
'use client'
import React from 'react'
import Styles from '../page.module.scss'
import Typewriter from '@/components/TypeWriter'

export default function TotalWarning() {
  const list = [
    { num: 22, name: '交通事故' },
    { num: 18, name: '违法行为' },
    { num: 36, name: '交通拥堵' },
  ]
  const text =
    '基于历史30天的事故分析，发现在衡州大道蒸湘与蒸阳基于历史30天的事故分析，发现在衡州大道蒸湘与蒸阳,基于历史30天的事故分析，发现在衡州大道蒸湘与蒸阳'
  return (
    <div className={`absolute top-[90px] left-[15px] w-[400px] ${Styles['common-bg']}`}>
      <div className='w-full h-[142px]'>
        <div className={`${Styles.title} `}> 今日预警总数</div>
        <div className='flex justify-center items-center'>
          {list.map(item => (
            <div
              key={item.name}
              className={`${Styles['item-wrap']}`}>
              <div className={`${Styles['num']}`}>{item.num}</div>
              <div className={`${Styles.text}`}>{item.name}</div>
            </div>
          ))}
        </div>
      </div>
      <div className='h-[358px]'>
        <Typewriter
          text={text}
          // speed={speed}
          // loop={loop}
          onComplete={() => console.log('打字完成！')}
        />
      </div>
    </div>
  )
}
